<template>
  <view class="content">
    <image class="logo-icon" src="../static/images/logo.png"></image>
    <view class="title mt-20">安全管理</view>
    <view class="subtitle mt-150">欢迎登录</view>
    <view class="subtitle mt-20">能源集团安全管理系统</view>
    <view class="form-block mt-50">
      <view class="item-block">
        <view class="item-label pl-10 pr-10 mb-10">用户名/手机号</view>
        <view class="input-block pd-20">
          <image class="input-icon" src="../static/images/login-user-icon.png"></image>
          <input class="input ml-10" v-model="params.mobile" maxlength="11" placeholder="请输入账号、手机号" placeholder-class="placeholder" />
        </view>
      </view>
      <view class="item-block mt-30">
        <view class="item-label pl-10 pr-10 mb-10">密码</view>
        <view class="input-block pd-20">
          <image class="input-icon" src="../static/images/login-pwd-icon.png"></image>
          <input class="input ml-10" v-model="params.password" type="password" placeholder="请输入密码" placeholder-class="placeholder" />
        </view>
      </view>
     <view class="check-block mt-30 pl-10 pr-10" @click="() => checkState = !checkState">
       <view class="check-icon-block">
         <u-icon v-if="checkState" name="checkmark" color="#0776E2" size="20rpx"></u-icon>
       </view>
       <text class="ml-10">记住密码</text>
     </view>
    </view>
    <button class="button mt-50" @click="$u.throttle(submit, 1000)">登录</button>
  </view>
</template>

<script>
  import { loginApi, getUserInfoApi,getlistmenusApi } from '@/apis/auth/index.js'
  import { setToken, setUserInfo } from '@/utils/auth.js'

  export default {
    data() {
      return {
        params: {
          // mobile: '',
          // password: '',
          mobile: '18615315808',
          // mobile: '13853148641',
          password: 'jnnyjt@123'
        },
        checkState: false,
        routeBackState: false
      }
    },
    onLoad(options) {
      if(options.routeBack) this.routeBackState = true
    },
    onShow() {
      if(uni.getStorageSync('loginInfo')) {
        let loginInfo = JSON.parse(uni.getStorageSync('loginInfo'))
        if(loginInfo.checkState) {
          this.checkState = loginInfo.checkState
          this.params = loginInfo.params
        }
      }
    },
    methods: {
      submit: function() {
        let params = this.params
        if(!params.mobile) {
          uni.showToast({ title: '请输入账号或手机号', icon: 'none' })
          return false
        }
        if(!params.password) {
          uni.showToast({ title: '请输入密码', icon: 'none' })
          return false
        }
        loginApi(params).then(res => {
          uni.setStorageSync('loginInfo', JSON.stringify({ checkState: this.checkState, params: this.params }))
          setToken(res.token)
          getUserInfoApi().then(result => {
            setUserInfo(result)
            if(this.routeBackState) {
              setTimeout(() => uni.navigateBack(), 500)
            } else {
              // getlistmenusApi().then(result=>{
              //   console.log(result)
              // })
              setTimeout(() => uni.redirectTo({ url: '/pages/index' }), 500)
            }
          }).catch(err => console.warn(err))
        }).catch(err => console.warn(err))
      }
    }
  }
</script>

<style>
  page {
    background-image: url('');
    background-size: 100% auto;
  }
</style>

<style lang="scss" scoped>
  .content {
    display: flex;
    align-items: center;
    flex-direction: column;
    .logo-icon {
      margin-top: 150rpx;
      width: 150rpx;
      height: 150rpx;
    }
    .title {
      font-size: 86rpx;
      font-family: Source Han Sans CN;
      font-weight: bold;
      font-style: italic;
      color: #FDFFFE;
      text-shadow: 11rpx 11rpx 11rpx rgba(6, 64, 161, 0.39);
    }
    .subtitle {
      font-size: 40rpx;
      line-height: 40rpx;
      color: #578AD0;
    }
    .form-block {
      .item-block {
        width: 607rpx;
        .item-label {
          font-size: 24rpx;
          line-height: 32rpx;
          color: #666666;
        }
        .input-block {
          border-radius: 13rpx;
          border: 1rpx solid #5E5E5E;
          display: flex;
          align-items: center;
          .input-icon {
            width: 40rpx;
            height: 40rpx;
          }
          .input {
            width: 500rpx;
            font-size: 30rpx;
            line-height: 32rpx;
            color: #666666;
          }
          .placeholder {
            font-size: 24rpx;
            line-height: 32rpx;
            color: #D5D5D5;
          }
        }
      }
      .check-block {
        font-size: 26rpx;
        line-height: 28rpx;
        color: #999999;
        display: flex;
        align-items: center;
        .check-icon-block {
          width: 32rpx;
          height: 32rpx;
          border: 1rpx solid #787878;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 3rpx;
        }
      }
    }
    .button {
      width: 610rpx;
      height: 97rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 40rpx;
      color: #FFFFFF;
      background-color: #0776E2;
    }
  }
</style>
